<template>
    <div class="today-container">
        <van-nav-bar title="今日秒杀" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-tabs v-model="active" animated>
            <van-tab v-for="item in tabList" :title="item" :key="item.index">
                <van-list v-model="loading" :finished="finished" @load="onLoad">
                    <!-- 一条数据 -->
                    <van-cell v-for="item in productList" :key="item.id" @click="toDetail(item.id)">
                        <div class="product">
                            <img :src="item.picture" alt="">
                            <div class="right">
                                <span class="dis over">{{ item.shop }}</span>
                                <p class="title over">{{ item.product }}</p>
                                <!-- 进度条 -->
                                <div class="progress">
                                    <van-progress :percentage="30" stroke-width="8" color='#FF6600' />
                                    <span>已抢1234</span>
                                </div>
                                <div class="buy">
                                    <div>
                                        <span class="price">{{ item.price }}</span>
                                        <span class="oldPrice">{{ item.oldprice }}</span>
                                    </div>
                                    <van-button size="mini" color="linear-gradient(to right, #ff6034, #ee0a24)" round>
                                        立即抢</van-button>
                                </div>
                            </div>
                        </div>
                    </van-cell>

                </van-list>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            active: '',
            tabList: ['9:00', '10:00', '11:00', '12:00'],
            finished: true,
            loading: false,
            productList: []
        }
    },
    methods: {
        onLoad() {

        },
        onClickLeft() {
            this.$router.go(-1)
        },
        getList(newValue) {
             axios({
                url: 'http://api.yuguoxy.com/api/shop/list/category',
                method: 'get',
                params: {
                    categoryId: newValue,
                    pageSize: 10,
                    pageNo: 1
                }
            }).then(res => {
                console.log(res);
                if (res.data.resultCode == 1) {
                    this.productList = res.data.resultInfo.list
                }
            })
        },
        toDetail(id) {
            console.log('今日秒杀', id);
            this.$router.push('/detail' + '?id=' + id)
        }
    },
    watch: {
        active(newValue) {
            newValue==0?newValue=4:
            console.log(newValue);
            this.getList(newValue)
        }
    }
}
</script>

<style lang="scss" scoped>
.product {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // border: 1px solid #000;
    max-height: 130px;

    img {
        width: 120px;
        height: 120px;
        border-radius: 10px;
    }

    .right {
        padding: 0 5px;
        // border: 1px solid #000;
        width: 300px;

        .dis {
            color: #666666;

        }

        .title {
            font-size: 20px;
            padding: 10px 0;
        }

        .progress {
            span {
                color: #999;
            }
        }

        .buy {

            display: flex;
            justify-content: space-between;
            padding-right: 20px;

            .price {
                color: #FF6600;
                font-size: 20px;
                display: inline-block;
                margin-right: 5px;
            }

            .oldPrice {
                color: #999999;
                text-decoration: line-through;
            }
        }
    }
}

.over {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>